<template>
  <a-layout>

    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">

      <a-form
          layout="inline"
          :model="state"
      >
        <a-form-item>
          <a-input v-model:value="state.name" placeholder="name">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="load">select</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="add">create</a-button>
        </a-form-item>
      </a-form>

      <a-table :columns="columns" :data-source="user"
               :pagination="pagination"
               @change="handleTableChange">

        <template #bodyCell="{ column,record }">

          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="primary" @click="ResetPassword(record)">ResetPassword</a-button>
              <a-button type="primary" @click="update(record)">update</a-button>

              <a-popconfirm
                  title="Are you sure delete this record?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirmDel(record.id)"
                  @cancel="cancel"
              >
                <a-button type="primary" danger >Delete</a-button>
              </a-popconfirm>
            </a-space>
          </template>

        </template>
      </a-table>

    </a-layout-content>

    <div>
      <a-modal
          v-model:visible="visible"
          title="Title"
          @ok="handleOk"
      >
        <p>
          <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">

            <a-form-item label="User LoginName">
              <a-input v-model:value="formState.loginName" :disabled="formState.id"/>
            </a-form-item>

            <a-form-item label="User Name">
              <a-input v-model:value="formState.name" />
            </a-form-item>

            <a-form-item label="User Password" v-show="!formState.id">
              <a-input v-model:value="formState.password" />
            </a-form-item>

          </a-form>
        </p>
      </a-modal>

      <a-modal
          v-model:visible="resetVisible"
          title="Reset Password"
          @ok="resetHandleOk"
      >
        <p>
          <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">

            <a-form-item label="User New Password">
              <a-input v-model:value="formState.password" />
            </a-form-item>

          </a-form>
        </p>
      </a-modal>
    </div>

  </a-layout>
</template>

<script>
import axios from "axios";
import {ref, onBeforeMount } from "vue"
import { message } from 'ant-design-vue'

export default {
  name: "AdminUser",
  setup(){
    const user = ref()
    const columns  = ref([
      {
        title: 'loginName',
        key: 'loginName',
        dataIndex: 'loginName',
      },
      {
        title: 'name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'password',
        dataIndex: 'password',
        key: 'password',
      },
      {
        title: 'action',
        key: 'action',
        dataIndex: 'action',
      },
    ])
    const pagination = ref({
      current:1,
      pageSize:2,
      total:''
    })
    const state = ref({})
    const formState = ref({})
    const visible = ref(false);
    const resetVisible = ref(false);


    onBeforeMount(()=>{
      console.log("onMounted AdminEbook")
      load()
    })

    function handleTableChange(pagination2) {
      console.log("handleTableChange")
      pagination.value = pagination2
      load()
    }

    const load=()=>{
      console.log("load...")

      axios.get("api/userList", {
        params: {
          pageNum: pagination.value.current,
          pageSize: pagination.value.pageSize,
          name:state.value.name,
        }
      }).then(res => {
        console.log(res)
        if(res.data.code === "200"){
          user.value = res.data.data.list
          pagination.value.current = res.data.data.pageNum
          pagination.value.pageSize = res.data.data.pageSize
          pagination.value.total = res.data.data.total
        }else{
          message.error(res.data.msg)
        }
      })
    }

    const add = () => {
      formState.value = {}
      visible.value = true
    };

    const update = (record) => {
      formState.value = JSON.parse(JSON.stringify(record))
      visible.value = true
    };

    const ResetPassword = (record) => {
      formState.value = JSON.parse(JSON.stringify(record))
      formState.value.password = null
      resetVisible.value = true
    }

    const handleOk = () => {
      console.log("handleOk")

      formState.value.password = hexMd5(formState.value.password+KEY)

      axios.post("api/user",formState.value)
          .then(res => {
            console.log(res.data.code)

            if(res.data.code === "200"){
              visible.value = false
              load()
            }else{
              message.error(res.data.msg);
            }
          })
    }

    const resetHandleOk = () => {
      console.log("resetHandleOk")

      formState.value.password = hexMd5(formState.value.password+KEY)

      axios.post("api/user/password",formState.value)
          .then(res => {
            console.log(res.data.code)

            if(res.data.code === "200"){
              resetVisible.value = false
              load()
            }else{
              message.error(res.data.msg);
            }
          })
    }

    const confirmDel = (id) => {
      console.log("confirmDel")

      axios.delete("api/user/"+id,)
          .then(res => {
            console.log(res.data.code)

            if(res.data.code === "200"){
              console.log(res.data.msg)

              message.success(res.data.msg);
              load()
            }else{
              console.log(res.data.msg)
              message.error(res.data.msg);
            }
          })
    };

    return{
      user,
      columns,
      pagination,
      visible,
      formState,
      state,
      resetVisible,
      labelCol: {
        style: {
          width: '150px',
        },
      },
      wrapperCol: {
        span: 14,
      },
      update,
      add,
      handleOk,
      handleTableChange,
      confirmDel,
      load,
      ResetPassword,
      resetHandleOk,
    }
  }
}
</script>

<style scoped>

</style>